@import url("../../utilities.css");

.VideoInfo-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.Videoinfo-title{
  margin-right: auto;
   font-size: x-large;
   font-weight: bold;
}

.VideoInfo-buttons {
  display: flex;
  flex-direction: row;
  margin-left: auto;
  margin-right: 0;
}

.VideoInfo-button {
  position: relative;
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: var(--s);
  max-width: 40%;
  width: calc(3 * var(--l));
  border-style: none;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.3s ease;
  border-radius: 10px;
}

.heart {
  margin-left: auto;
  width: 30px;
  height: 30px;
  background: url("/src/pictures/icon/unlike.svg") no-repeat center center / contain;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.heart.liked {
  background: url("/src/pictures/icon/like.svg") no-repeat center center / contain;
  transform: scale(1.2);
  animation: pop 0.3s ease forwards;
}

.comment {
  margin-left: auto;
  width: 30px;
  height: 30px;
  background: url("/src/pictures/icon/comment.svg") no-repeat center center / contain;
}

.star {
  margin-left: auto;
  width: 30px;
  height: 30px;
  background: url("/src/pictures/icon/unstar.svg") no-repeat center center / contain;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.star.stared {
  background: url("/src/pictures/icon/star.svg") no-repeat center center / contain;
  transform: scale(1.2);
  animation: pop 0.3s ease forwards;
}

.share {
  margin-left: auto;
  width: 30px;
  height: 30px;
  background: url("/src/pictures/icon/share.svg") no-repeat center center / contain;
  transition:
    transform 0.3s ease,
    background 0.3s ease;
}

.popup {
  position: absolute;
  top: calc(-120% - 20px);
  left: 50%;
  transform: translateX(-50%);
  padding: 10px;
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  border-radius: 5px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.popup-button {
  display: flex;
  flex-direction: column;
  padding: 5px 10px;
  margin: 5px 5px;
  cursor: pointer;
  border: 12px;
  border-radius: 5px;
  background-color: transparent;
  color: rgb(12, 11, 11);
  transition: background-color 0.3s ease;
}

.popup-button:hover {
  background-color: whitesmoke;
}

@keyframes pop {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.3);
  }

  100% {
    transform: scale(1);
  }
}

@media (prefers-color-scheme: dark) {
  /* add colors in darkmode here */
}
